<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登陆</title>
<style>
* {
	padding: 0;
	margin: 0
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: url(${pageContext.request.contextPath}/img/login.png)
		no-repeat;
	background-size: 100% 100%;
	font-size: 12px;
}

.cc-login-box {
	width: 26.5625%;
	height: 41.6666667%;
	background: rgba(255, 255, 255, .7);
	border-radius: 10px 10px;
	margin: 0 auto;
	margin-top: 10.5%;
	padding: 1.8rem;
}

.cc-login-box h1 {
	color: #333;
	text-align: center;
	font-weight: 600;
	font-size: 2.75rem;
}

.cc-input-group {
	width: 54.9019608%;
	height: 40px;
	margin: 0 auto;
	position: relative;
}

.cc-input-group label {
	position: absolute;
	left: 18px;
	top: -22px;
	font-size: 1.2775rem;
}

.cc-input-group input {
	width: 100%;
	height: 100%;
	outline: 0px;
	/* border: 0px; */
	border-radius: 18px;
	padding-left: 18px;
	box-sizing: border-box;
}

.cc-checkbox-group {
	display: flex;
	align-items: center;
	margin-left: 25.98%;
	margin-top: 2.35294118%;
}

.cc-checkbox-group label {
	font-size: 1.2775rem;
	margin-left: 12px;
}

.cc-checkbox-group input {
	zoom: 150%;
}

.cc-login-btn {
	display: block;
	margin: 0 auto;
	width: 54.9019608%;
	height: 44px;
	margin-top: 6.66666667%;
	background: #e8373d;
	/* border:0px; */
	border-color: #e8373d;
	outline: 0px;
	color: white;
	border-radius: 18px;
	font-size: 1.66666667rem;
	cursor: pointer;
}

.cc-login-box a {
	font-size: 1.2775rem;
	color: #666;
	text-decoration: underline;
	cursor: pointer;
	display: block;
	width: 6.3875rem;
	margin: 0 auto;
	margin-top: 0.8333rem;
}
</style>
</head>
<body>
	<div class="cc-login-box">
		<h1>孝感市老市委大院智慧社区综合管理平台</h1>
		<div class="cc-input-group" style="margin-top: 13.72%;">
			<label>登录名</label> <input id="username" name="username" type="text">
		</div>
		<div class="cc-input-group" style="margin-top: 7.0588%;">
			<label>密码</label> <input id="password" name="password" type="password">
		</div>
		<div class="cc-checkbox-group">
			<input type="checkbox" id="check"> <label>记住密码</label>
		</div>
		<button id="submit" type="button" onclick="login();" class="cc-login-btn">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;陆</button>
		<!-- 		<a href="#">忘记密码？</a> -->
	</div>
</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script>
	$(function() {
		if (getCookie('username') && getCookie('password')) {
			$("#username").val(getCookie('username'));
			$("#password").val(getCookie('password'));
			document.getElementById('check').checked = true;
		}
	});
	function login() {
		var username = $('#username').val();
		if (username == "") {
			layer.msg('请输入用户名!', {
				icon : 5,
				time : 1000
			});
			return;
		}
		var password = $('#password').val();
		if (password == "") {
			layer.msg('请输入密码!', {
				icon : 5,
				time : 1000
			});
			return;
		}
		$.ajax({
			url : '${pageContext.request.contextPath}/user_login',
			type : 'post',
			data : {
				username : username,
				password : password
			},
			success : function(map) {
				console.log(map);
				var result = map['result'];
				if (result == 1) {
					layer.msg('登录成功!', {
						icon : 1,
						time : 1500
					});
					setTimeout(function() {
						if ($("#check").prop('checked')) {
							setCookie('username', username, 7); //保存帐号到cookie，有效期7天
							setCookie('password', password, 7); //保存密码到cookie，有效期7天
						}
						location.href = "jump_index";
					}, 800);
				} else if (result == 2) {
					layer.msg('密码错误!', {
						icon : 5,
						time : 1500
					});
				} else if (result == -1) {
					layer.msg('账号不存在!', {
						icon : 5,
						time : 1500
					});
				} else {
					layer.msg('登录失败!', {
						icon : 2,
						time : 1500
					});
				}

			}
		});
	}
	$("body").keydown(function() {
		if (event.keyCode == "13") {//keyCode=13是回车键
			$('#submit').click();
		}
	});
	//设置cookie
	function setCookie(name, value, day) {
		var date = new Date();
		date.setDate(date.getDate() + day);
		document.cookie = name + '=' + value + ';expires=' + date;
	};
	//获取cookie
	function getCookie(name) {
		var reg = RegExp(name + '=([^;]+)');
		var arr = document.cookie.match(reg);
		if (arr) {
			return arr[1];
		} else {
			return '';
		}
	};
	//删除cookie
	function delCookie(name) {
		setCookie(name, null, -1);
	};
</script>
</html>